<template>
  <div>
    <div @click="changeClass(item.classify)" :class="{active : item.classify == now}" v-for="(item,index) in classifyName" :key="index" class="items">
        {{item.classify}}
    </div>
  </div>
</template>

<script>
import {mapActions,mapGetters} from 'vuex'
import axios from 'axios'
export default {
  data() {
    return {
      now: "京东到家",
      classifyName: [
        "京东到家",
        "京东商城",
        "京东新百货",
        "京东生鲜",
        "数码电器",
      ],
    };
  },
  methods:{
    changeClass(e) {
        this.now = e;
        // 某一个分类
        this.filterData(e);
    },
    ...mapActions(['filterData']),
    getClassify() {
      axios.get('/getClassify').then((data) => {
        this.classifyName = data.data
        this.now = data.data[0].classify
      })
    }
  },
  computed:{
    ...mapGetters(['getNowList'])
  },
  created() {
    this.filterData(this.now)
    this.getClassify()
  }
};
</script>

<style scoped>
.items{
    height: 46px;
    text-align: center;
    line-height: 46px;
}
.active{
    color : red;
    background-color: white;
}
</style>